<template>
	<view class="comments-container">
		<!-- 评论类型切换 -->
		<view class="tab-bar">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="{ active: currentTab === index }"
				@tap="switchTab(index)"
			>
				<text>{{ tab }}</text>
				<text class="count">({{ tabCounts[index] }})</text>
			</view>
		</view>
		
		<!-- 评论列表 -->
		<scroll-view 
			scroll-y 
			class="comments-list"
			@scrolltolower="loadMore"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh"
		>
			<view class="comment-item" v-for="(comment, index) in commentsList" :key="index">
				<view class="book-info">
					<image class="book-cover" :src="comment.bookCover" mode="aspectFill"></image>
					<view class="book-meta">
						<text class="book-name">{{ comment.bookName }}</text>
						<view class="rating">
							<text class="score">{{ comment.score }}分</text>
							<view class="stars">
								<text 
									v-for="n in 5" 
									:key="n" 
									class="iconfont icon-star"
									:class="{ active: n <= comment.score/2 }"
								></text>
							</view>
						</view>
					</view>
					<view class="comment-time">{{ comment.createTime }}</view>
				</view>
				
				<view class="comment-content">
					<text class="title" v-if="comment.title">{{ comment.title }}</text>
					<text class="content">{{ comment.content }}</text>
					<view class="images" v-if="comment.images && comment.images.length">
						<image 
							v-for="(img, imgIndex) in comment.images" 
							:key="imgIndex" 
							:src="img" 
							mode="aspectFill"
							@tap="previewImage(comment.images, imgIndex)"
						></image>
					</view>
				</view>
				
				<view class="comment-footer">
					<view class="stats">
						<view class="stat-item">
							<text class="iconfont icon-like"></text>
							<text>{{ comment.likeCount }}</text>
						</view>
						<view class="stat-item">
							<text class="iconfont icon-comment"></text>
							<text>{{ comment.replyCount }}</text>
						</view>
					</view>
					<view class="operations">
						<view class="op-item" @tap="editComment(comment)">
							<text class="iconfont icon-edit"></text>
							<text>编辑</text>
						</view>
						<view class="op-item" @tap="deleteComment(comment)">
							<text class="iconfont icon-delete"></text>
							<text>删除</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="hasMore">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabs: ['全部评论', '好评', '中评', '差评'],
			tabCounts: [125, 98, 15, 12],
			currentTab: 0,
			isRefreshing: false,
			hasMore: true,
			page: 1,
			commentsList: [
				{
					id: 1,
					bookName: '三体',
					bookCover: '/static/images/book1.jpg',
					score: 9.5,
					title: '震撼人心的科幻巨著',
					content: '刘慈欣的《三体》是一部令人震撼的科幻巨著。作品以独特的视角展现了人类文明在宇宙中的渺小与伟大，深刻探讨了文明的本质和人性的复杂性。黑暗森林法则的提出，让人不寒而栗，又不得不承认其中的真实性。',
					createTime: '2024-03-20 14:30',
					likeCount: 328,
					replyCount: 45,
					images: [
						'/static/images/comment1.jpg',
						'/static/images/comment2.jpg'
					]
				},
				{
					id: 2,
					bookName: '活着',
					bookCover: '/static/images/book2.jpg',
					score: 9.0,
					content: '余华的《活着》是一部让人深思的作品，福贵的一生充满苦难，但他始终保持着对生活的热爱。这种坚韧的生命力量让人感动。',
					createTime: '2024-03-19 20:15',
					likeCount: 156,
					replyCount: 23
				}
				// 更多评论数据...
			]
		}
	},
	methods: {
		switchTab(index) {
			this.currentTab = index
			this.page = 1
			this.hasMore = true
			this.commentsList = [] // 清空列表
			this.loadCommentsList() // 重新加载评论列表
		},
		loadCommentsList() {
			// 加载评论列表
			console.log('加载评论列表：', this.currentTab, this.page)
		},
		loadMore() {
			if (!this.hasMore) return
			this.page++
			this.loadCommentsList()
		},
		onPulling() {
			// 下拉刷新触发时
		},
		async onRefresh() {
			this.isRefreshing = true
			await this.loadCommentsList()
			this.isRefreshing = false
		},
		previewImage(images, current) {
			uni.previewImage({
				urls: images,
				current: images[current]
			})
		},
		editComment(comment) {
			uni.navigateTo({
				url: `/pages/comment-edit/comment-edit?id=${comment.id}`
			})
		},
		deleteComment(comment) {
			uni.showModal({
				title: '提示',
				content: '确定删除这条书评吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('删除书评：', comment)
						// 执行删除操作
					}
				}
			})
		}
	}
}
</script>

<style lang="scss">
.comments-container {
	min-height: 100vh;
	background: #f5f5f5;
	
	.tab-bar {
		display: flex;
		background: #fff;
		padding: 20rpx 0;
		
		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			position: relative;
			
			&.active {
				color: #3cc51f;
				
				&::after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: -20rpx;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: #3cc51f;
					border-radius: 2rpx;
				}
			}
			
			.count {
				font-size: 24rpx;
				color: #999;
				margin-left: 6rpx;
			}
		}
	}
	
	.comments-list {
		height: calc(100vh - 88rpx);
		padding: 20rpx;
		
		.comment-item {
			background: #fff;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			
			.book-info {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;
				
				.book-cover {
					width: 80rpx;
					height: 120rpx;
					border-radius: 8rpx;
				}
				
				.book-meta {
					flex: 1;
					margin-left: 20rpx;
					
					.book-name {
						font-size: 28rpx;
						font-weight: bold;
						color: #333;
						display: block;
						margin-bottom: 10rpx;
					}
					
					.rating {
						display: flex;
						align-items: center;
						
						.score {
							font-size: 24rpx;
							color: #ff9500;
							margin-right: 10rpx;
						}
						
						.stars {
							display: flex;
							
							.icon-star {
								font-size: 24rpx;
								color: #ddd;
								margin-right: 4rpx;
								
								&.active {
									color: #ff9500;
								}
							}
						}
					}
				}
				
				.comment-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.comment-content {
				margin-bottom: 20rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 16rpx;
					display: block;
				}
				
				.content {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
				}
				
				.images {
					display: flex;
					flex-wrap: wrap;
					margin-top: 20rpx;
					
					image {
						width: 200rpx;
						height: 200rpx;
						margin-right: 10rpx;
						margin-bottom: 10rpx;
						border-radius: 8rpx;
						
						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}
			
			.comment-footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.stats {
					display: flex;
					
					.stat-item {
						display: flex;
						align-items: center;
						margin-right: 30rpx;
						
						.iconfont {
							font-size: 32rpx;
							color: #999;
							margin-right: 8rpx;
						}
						
						text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.operations {
					display: flex;
					
					.op-item {
						display: flex;
						align-items: center;
						margin-left: 30rpx;
						
						.iconfont {
							font-size: 32rpx;
							color: #999;
							margin-right: 8rpx;
						}
						
						text {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
			}
		}
		
		.loading-more, .no-more {
			text-align: center;
			padding: 30rpx 0;
			
			text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style> 